<template>
	<view class="home">
		<view class="u-bg">
			<image src="../../static/headbackground_personalCenter_2.png"></image>
		</view>
		<view class="content">
			<view class="content-header-jifen">
				<view class="jifen">
					<view class="font-30">当日可用积分</view>
					<view class="font-40">{{data.money}}</view>
				</view>
				<view class="jifen">
					<view class="font-30">可兑换金额</view>
					<view class="font-40">{{ (data.money / duihuan).toFixed(2) }}</view>
					<!-- <view class="font-30">消耗{{jf}}积分</view>
					<view class="font-40">
						<u-button shape="circle" type="warning" size="mini" @click="getNumdh()">点击兑换</u-button>
					</view> -->
				</view>
			</view>
	<view class="rw-content">
			<view class="weui-cell__bd" style=" font-size: 20px;    display: flex;justify-content: left;margin: 50px 0; padding: 0 20px;">
				<img class="choose_refund_icon" style="width: 30px; height: 30px; margin: 0 10px;"
				 src="">
				<p>提款到微信</p>
				<icon type="success_no_circle" size="26" style="margin-left: 100px;"></icon>
			</view>
			<view style=" margin:20px 30px;color:rgba(0,0,0,.5);font-size: 15px;">输入兑换金额</view>
			<view class="weui-cell__ft" style="display: flex;flex-direction: row; justify-content: center;  font-size: 16px;margin: 10px;">
				  <view class="weui-cell__hd" style="width: 20%;text-align: center;"><label class="weui-label">金额</label></view>
				  <view class="weui-cell__bd" style="width: 80%;">
					  <input name="refundFee" type="number" class="weui-input" @input="shuju" v-model="inputValue" :placeholder="'不大于'+(data.money / duihuan).toFixed(2) +'元'">
				  </view>
			</view>
			  <view class="weui-cells__tips" style="margin: 20px 30px 10px;font-size: 15px;font-weight: bold;color: #576b95;"><a class="weui-link" href="javascript:">预计需收取提现手续费：<span id="serviceFee">{{shouxufen}}</span>元</a>
			        </view>
			  <view class="weui-cells__tips" id="wechatTips">
					1.提现到微信零钱需要该微信支付账户实名认证。<br>
					2.提现单次限额：{{jiner}}元。当日限额：{{jiner}}元。<br>
					3.付款资金将进入该微信的零钱（微信-我-钱包-零钱）。微信支付将做零钱入账消息通知，零钱收支明细会展示相应记录。<br>
					<!--            4.提现到微信零钱（试行期）暂不收取手续费。<br>-->
				</view>
				<view style="    margin: 20px auto;width: 45%;">
					<button  @click="dhcd" style="background: #DD524D;color: #FFFFFF; border-radius: 10px;">立即兑换</button>
				</view>
			</view>
			<view style="width: 100%;margin: 0 auto;margin-top: 10rpx;">
				<ad style="width: 90%; height:100px !important;position: fixed;bottom: 0;" unit-id="adunit-5e366c4d4d9394a8"></ad>
			</view>
			<u-popup v-model="show" mode="center" border-radius="10" width="400" height="300">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view style="padding-top: 30upx;">
						<view style="text-align: center;font-size: 30upx;">提示</view>
						<view style="text-align: center;margin-top: 20upx;font-weight: bold;font-size: 35upx;">
							消耗{{jf}}积分兑换</view>
					</view>
					<view style="margin-top: 40upx;">
						<u-button @click="dhcd">立即兑换</u-button>
					</view>
				</view>
			</u-popup>
	
			<!-- 			<view class="lq-lip">
					<u-button type="primary">主要按钮</u-button>
				</view> -->
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				imgshow:false,
				sn: '',
				num: '',
				status: '',
				statusText: '',
				imei: '',
				value: 1,
				ordersn: '',
				videoAd: null,
				data: {},
				classList: [],
				jfList: [],
				id: '',
				selectList: {},
				jf: '',
				good: {},
				jfopenid: '',
				headimg: '',
				nickname: '',
				userid: 0,
				jftoken: '',
				rwid: 0,
				jiner:100,
				duihuan:0,
				inputValue:'',
				shouxufen:0,
			}
		},
		components: {},
		onShow() {
			// this.getdevice();
			var that = this;
			this.getjftiaojian()
			this.data=uni.getStorageSync('jfuserInfoList')
		
		},

		onReachBottom() {
			console.log('99')
		},
		methods: {
			getjftiaojian(){
				this.$request('', '/api/app/xcx/jftiaojian', 'POST', {
				}, {}).then(res => {
					console.log(res.data)
					this.jiner=res.data.jfMax
					this.duihuan=res.data.jfnum
				})
			},
			shuju(event){
				console.log(event)
				
				if(event.target.value>(this.data.money / this.duihuan)){
					uni.showToast({
						title: '请不要大于兑换金额',
						duration: 2000,
						icon: 'error'
					});
					this.inputValue=0
				}else{
					this.inputValue=event.target.value
				}
				
			},
			dhcd(){
				this.$request('', '/api/app/xcx/userRefund', 'POST', {
					wxopenid: uni.getStorageSync('openid'),
					jfopenid:this.data.openid,
					jiner:this.inputValue,
					token:uni.getStorageSync('token')
				}, {}).then(res => {
					if(res.status==200){
						uni.showToast({
							title: '兑换成功',
							duration: 2000,
							icon: 'success'
						});
						uni.navigateBack({
						    delta: 1
						});
					}else{
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'success'
						});
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.lq-lip {
		width: 90%;
	}

	.btn-qd {
		// width: 120upx;
		height: 60upx;
		background-color: rgb(255, 88, 75);
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 20upx;
		padding-left: 10upx;
		padding-right: 10upx;
		font-size: 26upx;
	}

	.font-30 {
		font-size: 28upx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2upx;
	}

	.font-40 {
		font-size: 40upx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		margin-top: 5upx;
	}

	.home {
		height: 100vh;
		width: 100%;
		background-color: rgb(242, 241, 239);
	}

	.select {
		background: #FFFFFF !important;
	}

	.u-bg {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.tag {
		width: 200upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		background: rgb(243, 244, 245);
		border-right: 1upx solid #C0C4CC;
	}

	.content {
		width: 100%;
		position: absolute;
		top: 100upx;

		.content-header-jifen {
			display: flex;
			justify-content: space-around;
		}

		.rw-content {
			width: 100%;
			background: #FFFFFF;
			border-radius: 15upx;
			margin: 0 auto;
			margin-top: 30upx;
			overflow: scroll;
			position: relative;

		}

		.tag-content {
			width: 95%;
			display: -webkit-box;
			overflow: scroll;
			position: fixed;
			z-index: 1000;
			border-radius: 15rpx;
		}

		.tag-title {
			margin-top: 30upx;
			font-size: 40upx;
			padding-left: 30upx;
			font-weight: bold;
		}

		.rw-list {
			display: flex;
			padding-left: 20upx;
			align-items: center;
		}

		.list {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			padding-right: 30upx;
			padding-left: 30upx;
			margin-top: 20upx;
		}
		.list-line {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20upx;
			margin-top: 20upx;
			margin-bottom: 20upx;
		}

		.no-list {
			width: 100%;
			height: 550upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.tag-content::-webkit-scrollbar {
			display: none
		}
	}
	#wechatTips{
		margin: 0 10px;
		color: rgba(0,0,0,.3);
	}
</style>
